<template>
	<view class="container">
		<view class="list">
			<view class="item flex_between">
				<view class="title">用户头像</view>
				<view class="right flex" @click="chooseImage">
					<image :src="userinfo.avatar || '../../static/image/mine/avatar.jpg'"
						style="width: 60rpx;height: 60rpx;border-radius: 50%;margin-right: 24rpx;"></image>
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
			<view class="item flex_between">
				<view class="title">用户昵称</view>
				<view class="right flex" @tap="modify('nickname')">
					<view class="detail el1" style="max-width: 400rpx;">{{userinfo.nick_name }}</view>
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
			<view class="item flex_between">
				<view class="title">个性签名</view>
				<view class="right flex" @tap="modify('sign')">
					<view class="detail el1" style="max-width: 400rpx;">{{userinfo.desc}}</view>
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
			<!-- <view class="item flex_between">
				<view class="title">手机号码</view>
				<view class="right flex" @tap="modify('mobile')">
					<view class="detail">{{userinfo.phone}}</view>
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view> -->
			<view class="item flex_between">
				<view class="title">当前版本</view>
				<view class="right flex">
					<view class="detail el1" style="max-width: 400rpx;">{{option.version}}</view>
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
			<view class="item flex_between">
				<view class="title">关于我们</view>
				<view class="right" @tap="toAboutUs">
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
			<!-- 	<view class="item flex_between">
				<view class="title">注销账号</view>
				<view class="right">
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view> -->
			<view class="item flex_between" @click="logout">
				<view class="title">退出登录</view>
				<view class="right">
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <uni-popup ref="issue">
			<view class="issue-content">
				<view class="issue-pos">
					<uni-file-picker limit="1" file-mediatype="all"
						@select="select">{{$t('mine.userInfo.Choose')}}</uni-file-picker>
				</view>
				<view class="issue-pos">
					<uni-file-picker limit="1" file-mediatype="all"
						@click="chooseImage">{{$t('mine.userInfo.Photo')}}</uni-file-picker>
				</view>
				<view class="issue-btn" @click="closeIssue">{{$t('mine.userInfo.Cancel')}}</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		user_info,
		userUpdateUser,
		setting
	} from '@/api/api.js'
	export default {
		data() {
			return {
				userinfo: {},
				baseUrl: "",
				option: {}
			};
		},
		onShow() {
			this.baseUrl = uni.getStorageSync("baseUrl")
			this.getUserInfo()
			this.getSetting()
		},
		methods: {
			//手机真机操作测试才能调用摄像头，相册图片，网页上只能选择图片
			chooseImage() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log(res.tempFilePaths[0]);
						_this.userinfo.avatar = res.tempFilePaths[0];
						console.log(res)
						_this.select(res)
					}
				});
			},


			getUserInfo() {
				user_info().then(res => {
					this.userinfo = res.data.data
					uni.setStorageSync('userinfo', this.userinfo)
				})
			},
			getSetting() {
				setting().then(res => {
					console.log(res.data.data)
					this.option = res.data.data
				})
			},
			modify(key) {
				switch (key) {
					case "nickname":
						this.goModify(key)
						break;
					case "sign":
						this.goModify(key)
						break;
					case "mobile":
						this.goModify(key)
						break;
					default:
						break;
				}
			},
			goModify(key) {
				uni.navigateTo({
					url: "/pages/shop/mine/modifyInfo/modifyInfo?key=" + key
				})
			},
			/* openIssue() {
				this.$refs.issue.open('bottom')
			},
			closeIssue() {
				this.$refs.issue.close()
			}, */
			// 获取上传状态
			select(e) {
				let that = this
				//that.closeIssue()
				console.log(e)
				const uploadTask = uni.uploadFile({
					url: that.baseUrl + "/api/common/upload",
					methods: 'POST',
					formData: {
						token: uni.getStorageSync('token'),
						file: e.tempFilePaths[0]
					},
					name: 'file',
					filePath: e.tempFilePaths[0],
					success: (res) => {
						console.log("111111111111")
						console.log('上传成功', res.data);
						let data = that.clearUTF8(res.data)
						that.userinfo.image = data.data.url
						that.userinfo.img = data.data.fullurl
						// 上传成功后修改用户头像信息
						that.userUpdateUser()
						that.$forceUpdate() // 页面强制刷新
					}
				})
			},
			clearUTF8(value) {
				let jsonString = value;
				let cleanedString = jsonString.replace(/^\uFEFF/, ''); // 删除 UTF-8 BOM 字符
				let jsonData = ""
				try {
					jsonData = JSON.parse(cleanedString);
					console.log(jsonData, "<<<<<<<<<<<");
				} catch (error) {
					console.error('Error parsing JSON:', error);
				}
				return jsonData
			},
			userUpdateUser() {
				console.log(uni.getStorageSync('token'), "<<<<<<<<")
				userUpdateUser({
					token: uni.getStorageSync('token'),
					avatar: this.userinfo.image,
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.getUserInfo()
					}, 600)
				})
			},
			// 关于我们
			toAboutUs() {
				uni.navigateTo({
					url: "/pages/setting/aboutUs"
				})
			},
			logout() {
				uni.setStorageSync('userinfo', '')
				// uni.setStorageSync('isRemember', false)
				uni.removeStorageSync("token")
				uni.showToast({
					title: '退出登录成功',
					icon: 'none',
					duration: 2500,
					complete() {
						uni.reLaunch({
							url: '/pages/tabbar/home'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 88rpx);
		background: url('../../static/image/mine/setting_bg.png') no-repeat center / cover;

		.list {
			padding: 48rpx;

			.item {
				height: 108rpx;
				overflow: hidden;

				.title {
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					flex-shrink: 0;
					font-weight: 600;
				}

				.detail {
					font-size: 28rpx;
					font-weight: 400;
					color: #7C8491;
					line-height: 40rpx;
					margin-right: 24rpx;
				}
			}
		}
	}

	.issue-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;

		.issue-pos {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
		}

		.issue-btn {
			height: 100rpx;
			line-height: 80rpx;
			border-top: 20rpx solid #F4F3F8;
		}
	}
</style>